<template>
  <form-create v-model="value" v-model:api="fApi" :rule="fcDesigner.formData" :option="option" />
</template>

<script lang="ts">
export default defineComponent({ name: 'CompForm' })
</script>
<script setup lang="ts">
import { defineComponent, ref } from 'vue'
import { useFcDesigner } from '../hooks/FcDesigner'

const fcDesigner = useFcDesigner()

const value = ref({})
const fApi = ref<any>({})
// const rule = ref([
//   {
//     type: 'input',
//     field: 'inputField',
//     title: '单行文本',
//     inject: true,
//     on: {
//       change: onChange
//     }
//   },
//   {
//     type: 'input',
//     field: 'inputField2',
//     title: '商品名称2',
//     inject: true,
//     on: {
//       change: onChange
//     }
//   },
//   {
//     type: 'checkbox',
//     field: 'label',
//     title: '标签',
//     options: [
//       { label: '好用', value: 0, disabled: true },
//       { label: '快速', value: 1 },
//       { label: '高效', value: 2 },
//       { label: '全能', value: 3 }
//     ],
//     props: {
//       // disabled: true
//     }
//   }
// ])

const option = ref({
  submitBtn: false,
  // resetBtn: true
  onSubmit: function (formData: any) {
    console.log(JSON.stringify(formData))
  },
  // injectEvent: true,
  form: {
    labelWidth: '80px',
    size: 'small'
    // inline: false,
    // hideRequiredAsterisk: false,
    // labelPosition: 'right',
    // formCreateSubmitBtn: true,
    // formCreateResetBtn: false
  },
  global: {}
})

// function onChange(inject?: any) {
//   console.log(inject, inject.self.value)
// }
</script>

<style lang="scss" scoped></style>
